<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>文字转语音 & 语音转文字工具</title>
		<link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
		<link href="./static/css/script.css" rel="stylesheet">
		<!-- <link href="./static/css/style.css" rel="stylesheet"> -->
	</head>
	<body>
		<!-- 表头 -->
		<div class="header" style="margin: 0;">
			<div class="container text-center">
				<h1 class="mb-2"><i class="fas fa-exchange-alt me-3"></i>文字转语音 & 语音转文字工具</h1>
				<p class="lead mb-0">简单高效的语音与文字转换解决方案</p>
			</div>

		</div>

		<!-- 表单 -->
		<div class="container">
			<div style="margin: 10px 0;display: flex;justify-content: end;">
				<div style="width: 30px;height: 30px;cursor: pointer;">
					<img src="static/img/cn-light.png" alt="" style="width: 100%;height: 100%;" id="cn-light"
						class="hide" />
					<img src="static/img/en-light.png" alt="" style="width: 100%;height: 100%;" id="en-light"
						class="show" />
					<img src="static/img/cn-dark.png" alt="" style="width: 100%;height: 100%;display: none;" id="cn-dark"
						class="hide" />
					<img src="static/img/en-dark.png" alt="" style="width: 100%;height: 100%;display: none;" id="en-dark"
						class="show" />
				</div>
				<div style="width: 30px;height: 30px;line-height: 30px; cursor: pointer; margin-left: 20px; transform: scale(1.5);" id="checkbox">
				    <i class="fas fa-sun" id="sun-display"></i>
				    <i class="fas fa-moon" id="moon-display" style="display: none;"></i>
				</div>
				<span class="theme-text"></span>
			</div>
			
			<!-- TTS 部分 -->
			<div class="form-container">
				<div class="feature-heading1">
					<div class="feature-icon">
						<i class="fas fa-play"></i>
					</div>
					<h3 class="mb-0">文字转语音</h3>
				</div>

				<form id="tts-form" method="POST" enctype="multipart/form-data" onsubmit="submitForm(event)">
					<div class="mb-3">
						<label for="text" class="form-label"><i class="fas fa-align-left me-2"></i>要转换的文字：</label>
						<textarea name="text" id="text" class="form-control" rows="4"
							placeholder="请输入要转换为语音的文本内容..."></textarea>
					</div>
					
					<div class="mb-3">
						<label for="text_file" class="form-label"><i class="fas fa-upload me-2"></i>上传文本文件（可选）：</label>
						<input type="file" name="text_file" id="text_file" class="form-control" accept=".txt">
					</div>

					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								<label for="file_name" class="form-label"><i
										class="fas fa-file-audio me-2"></i>文件名（不含扩展名）：</label>
								<input type="text" name="file_name" id="file_name" class="form-control"
									placeholder="生成文件的名称" required>
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<label for="voice" class="form-label"><i
										class="fas fa-microphone me-2"></i>选择语音：</label>
								<select name="voice" id="voice" class="form-select" required>
									{% for voice_id, voice_name in voiceMap.items() %}
									<option value="{{ voice_id }}">{{ voice_name }}</option>
									{% endfor %}
								</select>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-4">
							<div class="mb-3">
								<label for="rate" class="form-label"><i
										class="fas fa-tachometer-alt me-2"></i>语速：</label>
								<div class="input-group">
									<input type="text" name="rate" id="rateLabelif" class="form-control"
										placeholder="例如: +20% or -10%">
									<span class="input-group-text">-50% 到 +50%</span>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="mb-3">
								<label for="pitch" class="form-label"><i class="fas fa-wave-square me-2"></i>音调：</label>
								<div class="input-group">
									<input type="text" name="pitch" id="pitch" class="form-control"
										placeholder="例如: +20% or -10%">
									<span class="input-group-text">-50% 到 +50%</span>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="mb-3">
								<label for="volume" class="form-label"><i class="fas fa-volume-up me-2"></i>音量：</label>
								<div class="input-group">
									<input type="text" name="volume" id="volume" class="form-control"
										placeholder="例如: +20% or -10%">
									<span class="input-group-text">-50% 到 +50%</span>
								</div>
							</div>
						</div>
					</div>

					<div class="mb-3">
						<label for="ssml" class="form-label"><i class="fas fa-code me-2"></i>SSML（可选）：</label>
						<textarea name="ssml" id="ssml" class="form-control" rows="4"
							placeholder="输入SSML代码，留空则使用纯文本"></textarea>
					</div>

					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								<label for="output_format" class="form-label"><i
										class="fas fa-file-audio me-2"></i>输出格式：</label>
								<select name="output_format" id="output_format" class="form-select">
									<option value="mp3">MP3</option>
									<option value="wav">WAV</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3 d-flex align-items-center h-100">
								<div class="form-check mt-4">
									<input type="checkbox" name="generate_subtitles" id="generate_subtitles"
										class="form-check-input">
									<label for="generate_subtitles" class="form-check-label"><i
											class="fas fa-closed-captioning me-2"></i>生成字幕（SRT格式）</label>
								</div>
							</div>
						</div>
					</div>

					<div class="action-row1">
						<button type="submit" class="btn btn-primary" id="voice">
							<i class="fas fa-exchange-alt me-2"></i>生成语音
						</button>
						<button type="button" class="btn btn-secondary" onclick="previewAudio()">
							<i class="fas fa-headphones me-2"></i>预览语音
						</button>
					</div>
				</form>
			</div>

			<!-- STT 部分 -->
			<div class="form-container">
				<div class="feature-heading">
					<div class="feature-icon">
						<i class="fas fa-microphone"></i>
					</div>
					<h3 class="mb-0">语音转文字</h3>
				</div>
				<form id="stt-form" method="POST" enctype="multipart/form-data" onsubmit="submitSTT(event)">
					<div class="mb-3">
						<label for="audio_file" class="form-label"><i class="fas fa-upload me-2"></i>上传音频文件：</label>
						<input type="file" name="audio_file" id="audio_file" class="form-control" accept=".wav,.mp3"
							required>
						<div class="form-text text-muted">支持 WAV、MP3 格式的音频文件（仅限中文语音）</div>
						<div id="file-error" class="invalid-feedback" style="display: none;">
							请上传有效的音频文件（支持 .wav 或 .mp3 格式）。
						</div>
					</div>
					<div class="mb-3">
						<label for="output_file_name" class="form-label"><i
								class="fas fa-file-alt me-2"></i>输出文件名（不含扩展名）：</label>
						<input type="text" name="output_file_name" id="output_file_name" class="form-control"
							placeholder="生成文本文件的名称" required>
					</div>
					<div class="action-row2">
						<button type="submit" class="btn btn-primary">
							<i class="fas fa-exchange-alt me-2"></i>转换文字
						</button>
						<button type="button" class="btn btn-secondary" onclick="clearSTTForm()">
							<i class="fas fa-trash me-2"></i>清空表单
						</button>
					</div>
				</form>
			</div>

			<!-- Console 输出 -->
			<div id="console-section">
				<h3 class="section-title"><i class="fas fa-terminal me-2"></i>控制台</h3>
				<div id="console">等待操作...</div>
			</div>

			<!-- TTS 结果 -->
			<div id="audio-player" style="display: none;">
				<h3 class="section-title"><i class="fas fa-headphones me-2"></i>生成的语音</h3>
				<audio controls id="audio-output"></audio>
				<a href="#" id="download-link" class="download-btn"><i class="fas fa-download me-2"></i>下载音频</a>
				<a href="#" id="subtitle-link" class="download-btn" style="display: none;"><i
						class="fas fa-closed-captioning me-2"></i>下载字幕</a>
			</div>

			<!-- STT 结果 -->
			<div id="stt-result" style="display: none;">
				<h3 class="section-title"><i class="fas fa-file-alt me-2"></i>转换的文字</h3>
				<textarea class="form-control" id="stt-output" rows="5" readonly></textarea>
				<a href="#" id="stt-download-link" class="download-btn"><i class="fas fa-download me-2"></i>下载文本</a>
			</div>

			<footer class="text-center">
				<p class="mb-0">© 2025 MOML 文字转语音 & 语音转文字工具 | Powered by xAI</p>
			</footer>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
		<script src="./static/js/script.js"></script>
	</body>
</html>